import { View, Image } from "@tarojs/components";
import { useEffect, useState } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
// import { AtTabs, AtTabsPane } from "taro-ui";
import { Tab, Empty, Tabs, Tag } from "@antmjs/vantui";
// import r from "../../../static/R.jpg";
import "./collection.scss";

const Collection = () => {
  Taro.setNavigationBarTitle({ title: "我的收藏" });

  useDidShow(() => {
    getCollection(0);
  });

  const getCollection = (status: number) => {
    // console.log('data')
    Taro.cloud
      .callFunction({
        name: "logins",
        data: {
          $url: status === 0 ? "getScienceCollect" : "getSaleCollect"
        }
      })
      .then((res: any) => {
        //callback回调函数
        status === 0
          ? setScience(res.result.data)
          : setCommodity(res.result.data);
      });
  };

  const [pageCurrent] = useState([
    {
      name: "科普内容",
      id: 1
    },
    {
      name: "商品内容",
      id: 2
    }
  ]);

  const handleClick = value => {
    const { index } = value;
    getCollection(index);
  };

  //noncontent
  const [noncontent] = useState([
    {
      content: "没有更多的内容了"
    }
  ]);
  const Noncontent = noncontent.map(contnet => (
    <View className="noncontent">
      <Empty description={contnet.content} />
    </View>
  ));

  //科普内容
  const [science, setScience] = useState([]);

  const Science =
    science && science.length > 0
      ? science.map(content => (
          <View className="science">
            <View className="science_left">
              <Image className="img" src={content.image[0]}></Image>
            </View>
            <View className="science_right">
              <View className="title">{content.title}</View>
              {/* <View className="content">{content.content}</View> */}
            </View>
          </View>
        ))
      : Noncontent;

  const handleBuy = (value) => {
    Taro.setStorageSync('_id',value)
    Taro.navigateTo({
      url: "/pages/person/purchase/detail/detail"
    });
  };

  //商品内容
  const [commodity, setCommodity] = useState([]);

  const Commodity =
    commodity && commodity.length > 0 ? (
      <View className="commodity_box">
        {commodity.map(content => (
          <View className="commodity" onClick={() => handleBuy(content._id)}>
            <Image
              className="commodity_img"
              src={content.image[0]}
              mode="aspectFill"
            ></Image>
            <View className="commodity_down">
              <View className="name">{content.name}</View>
              <Tag className="price" type="danger">
                {" "}
                ¥ {content.price}
              </Tag>
            </View>
            {/* <Tag className="price" type="danger">
              {" "}
              ¥ {content.price}
            </Tag> */}
          </View>
        ))}
      </View>
    ) : (
      Noncontent
    );

  return (
    <View className="box">
      <Tabs onClick={handleClick}>
        {pageCurrent.map(item => {
          return (
            <Tab style={{ padding: "10px" }} key={item.id} title={item.name}>
              {item.id === 1 ? Science : Commodity}
            </Tab>
          );
        })}
      </Tabs>
    </View>
  );
};
export default Collection;
